Complete Code For Creating An Overlay Images Title Using CSS
<!DOCTYPE html> <html> <head> <title>How Can I Create An Overlay Images Title Using CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> </head> <style> * {box-sizing: border-box;} body{ background: #ffb3b3; } .image_con { position: relative; width: 100%; max-width: 100%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; bottom: 0; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.5); /* Black see-through */ color: #f1f1f1; width: 100%; transition: .5s ease; opacity: 1; color: white; font-size: 20px; padding: 20px; text-align: center; } .image_con:hover .overlay { opacity: 1; } </style> <body> <br/><br/> <div class="container"> <br> <div class="text-center"> <h1 id="color" style="color: black;">Create An Overlay Images Title Using CSS</h1> </div> <div class="well"> <div> <h2>Image Overlay Title</h2> <p>Hover over the image to see the effect.</p> <div class="image_con"> <img src="https://cdn.hipwallpaper.com/i/20/33/6JNnL1.jpg" alt="Avatar" class="image"> <div class="overlay">Am Tallest Animal Giraffe</div> </div> </div> </div> </div> </body> </html>